<!-- =======================================================
  * Author: Jéssica Yang
  ======================================================== -->

<template>
  <div>
    <!--标签页组件-->
    <el-tabs v-model="activeName" class="tab_container" @tab-click = "load">

      <!--未审核事务页-->
      <el-tab-pane name= 0 >
        <span slot="label"><i class="el-icon-document"></i> 未审核</span>
        <!--未审核事务的列表表格-->
        <el-table :data="notCheckedTableData" :max-height="tableHeight">
          <!--表头-->
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column prop="title" label="事务标题" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <div class="operation_show" slot-scope="scope">
              <!--审核按钮-->
              <el-button type="success" icon="el-icon-circle-check" @click = "audit(scope.row.bid)">审核</el-button>
            </div>
          </el-table-column>
        </el-table>

        <!--分页块-->
        <div>
          <el-pagination
              style="margin-top: 10px"
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

      <!--审核已通过事务页-->
      <el-tab-pane name= 2 >
        <span slot="label"><i class="el-icon-document-checked"></i> 通过</span>
        <!--审核已通过事务的列表表格-->
        <el-table :data="passTableData" :max-height="tableHeight" >
          <!--表头-->
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column prop="title" label="事务标题" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <div class="operation_show" slot-scope="scope">
              <!--查看当前事务信息按钮-->
              <el-button type="success" icon="el-icon-info" @click = "check(scope.row.bid)">查看</el-button>
            </div>
          </el-table-column>
        </el-table>

        <!--分页块-->
        <div>
          <el-pagination
              style="margin-top: 10px"
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

      <!--审核后被退回的事务页-->
      <el-tab-pane name = 1 >
        <span slot="label"><i class="el-icon-document-delete"></i> 退回</span>
        <!--被退回的事务列表表格-->
        <el-table :data="sendBackTableData" :max-height="tableHeight">
          <!--表头-->
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column prop="title" label="事务标题" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <div class="operation_show" slot-scope="scope">
              <!--查看当前事务信息按钮-->
              <el-button type="success" icon="el-icon-info" @click = "check(scope.row.bid)">查看</el-button>
              <el-button type="danger" icon="el-icon-info" @click = "flush(scope.row.bid)">退回理由</el-button>
            </div>
          </el-table-column>
        </el-table>


        <!--分页块-->
        <div>
          <el-pagination
              style="margin-top: 10px"
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

    </el-tabs>


    <!--事务审核对话框-->
    <el-dialog title="事务审核" :visible.sync="auditVisible" style="text-align: center">
      <el-descriptions :column="1" :colon="false" border :labelStyle="LS">
        <el-descriptions-item label="用户ID">{{this.business.uid}}</el-descriptions-item>
        <el-descriptions-item label="事务标题">{{this.business.title}}</el-descriptions-item>
        <el-descriptions-item label="事务内容">{{this.business.contents}}</el-descriptions-item>
      </el-descriptions>
      <div style="margin-top: 20px">
        <el-button type="danger" icon="el-icon-error" @click="changeStatus(1)">退回</el-button>
        <el-button type="primary" icon="el-icon-success" @click="changeStatus(2)">通过</el-button>
      </div>
    </el-dialog>

    <!--事务查看对话框-->
    <el-dialog title="事务查看" :visible.sync="checkVisible">
      <el-descriptions :column="1" :colon="false" border label-style="width: 200px">
        <el-descriptions-item label="用户ID">{{this.business.uid}}</el-descriptions-item>
        <el-descriptions-item label="事务标题">{{this.business.title}}</el-descriptions-item>
        <el-descriptions-item label="事务内容">{{this.business.contents}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!--退回理由对话框-->
    <el-dialog title="编辑退回理由" :visible.sync="backVisible" style="text-align: center">
      <el-input
          type="textarea"
          autosize
          resize="none"
          placeholder="请编辑退回理由"
          v-model="reason">
      </el-input>
      <el-button type="danger"
                 icon="el-icon-s-release"
                 @click = "sendMsg()"
                 style="margin-top: 20px"
      >完成编辑</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "BusinessList",
  data(){
    return{
      //分页组件
      currentPage:1,
      total:0,
      pagenum:1,
      pagesize:10,

      //表格数据
      notCheckedTableData: [],
      passTableData: [],
      sendBackTableData: [],

      tableHeight:"",   //表格高度

      activeName:'0',   //默认标签页

      //事务字段
      business:{
        id:null,
        uid:null,
        title:'',
        contents:''
      },

      bid: null,  //事务id

      auditVisible: false,  //审核事务对话框
      checkVisible: false,   //查看事务描述列表对话框
      backVisible:false,   //编辑退回信息对话框

      reason:'',   //退回理由

      //描述列表的label列宽度
      LS:{
        width: '150px'
      }
    }
  },
  created() {
    this.load()   //网页创建时加载数据
    this.getTableHeight(); //网页创建时获得表格高度
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  methods:{
    load() {  //网页创建时加载数据
      this.request.get("/business/findAll/" + this.pagenum + "/" + this.pagesize + "/" + parseInt(this.activeName))
          .then(res => {
            if (this.activeName === '0')
              this.notCheckedTableData = res.data.data.records
            if (this.activeName === '1')
              this.sendBackTableData = res.data.data.records
            if (this.activeName === '2')
              this.passTableData = res.data.data.records
            this.total = res.data.data.total
          })
    },

    //分页查询
    handleSizeChange(pagesize){   //每页条数改变时触发
      console.log(pagesize)
      this.pagesize = pagesize
      this.load()
    },
    handleCurrentChange(pagenum){   //当前页码改变时触发
      console.log(pagenum)
      this.pagenum = pagenum
      this.load()
    },

    //审核当前事务
    audit(bid){
      this.request.get("/business/checkBusiness/" + bid).then(res=>{
        if (res.data.code === '200'){
          this.business = res.data.data
          this.auditVisible = true
          this.bid = bid
        }
        else this.$message.error("请求出错")
      })
    },

    //发送审核信息
    changeStatus(status){
      this.request.get("/bcheck/changeStatus/" + this.bid + "/" + status + "/" +this.$store.state.id).then(res=>{
        if (res.data.code === '200'){
          this.$message.success("审核成功！")
          this.auditVisible =false
          this.load()
        }
        else
          this.$message.error("服务器出错！")
      })
    },

    //查看当前事务信息
    check(bid){
      this.request.get("/business/checkBusiness/" + bid).then(res=>{
        if (res.data.code === '200'){
          this.business = res.data.data
          this.checkVisible = true
          this.bid = bid
        }
        else this.$message.error("请求出错")
      })
    },

    //退回理由
    flush(bid){
      this.bid = bid
      this.backVisible = true
      this.reason = ''
    },

    //保存退回信息
    sendMsg(){
      this.request.get("/bcheck/changeMsg/" + this.bid + "/" + this.reason).then(res=>{

        if (res.data.code === '200'){
          this.$message.success("编辑退回信息成功！")
          this.backVisible = false
        }
        else
          this.$message.error("编辑退回信息失败！")
      })
    },

    //计算table高度(动态设置table高度)
    getTableHeight(){
      let tableH = 206; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    }
  }
}
</script>

<style scoped>
/*将表格操作列设为光标停留时显示*/
.operation_show{
  display: none;
}
.el-table__body tr:hover > td .operation_show{
  display: block;
}
</style>